<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>心</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background-color: #e4393c;
				/*外边距 自适应居中*/
				margin: 200px auto;
				/*转换属性：旋转*/
				transform: rotate(135deg);
				/*透明度：属性值范围值0~1*/
				opacity: .7;
				/*滤镜属性：下阴影  光晕
				drop-shadow(x轴 y轴)
				*/
				filter: drop-shadow(0 0 10px #e4393c);
				/*动画 复合属性2.启动动画*/
				animation: heart .5s linear infinite;
				/*       关键帧名称 过渡时间 过渡方式 动画次数*/
			}
			/*
			*css3基础语法：选择器：抓取页面上元素添加效果
			*3.伪类选择器：给元素添加附加效果
			*语法：选择器：hover  当鼠标悬停时给添加效果
			选择器：before 在元素之前生成内容
			选择器：after 在元素之后生成内容
			*/
		   /*需求：心【四方块】上生成内容*/
		   div:before{
			   content: "";
			   /*css属性：显示属性
			   display:block转换成块元素
			   display:inline;转换成行元素
			   display:none;元素消失
			   */
			  display: block;
			   /*画圆 1.空间2.边框/背景填充3.倒角*/
			   width: 200px;
			   height: 200px;
			   background-color: #e4393c;
			   border-radius: 50%;
			   /*相对定位*/
			   position: relative;
			   left: -100px;
		   }
		   div::after{
			   content: "";
			   display: block;
			   width: 200px;
			   height: 200px;
			   background-color: #e4393c;
			   border-radius: 50%;
			   position: relative;
			   bottom: 100px;
		   }
		   /*动画：1。创建关键帧 2.找到添加动画元素，启动关键帧*/
		   @keyframes heart{
		   	0%{
				/*等比例*/
				/*转换属性[复合属性]：旋转 缩放 平移*/
				transform:rotate(135deg) scale(1);
			}
		   	30%{
				/*scale(.8)缩小*/
				transform:rotate(135deg) scale(.8);
			}
			100%{
				/*scale(1.2)放大*/
				transform:rotate(360deg) scale(1.8);
			}
		   }
		</style>
	</head>
	<body>
		<audio src="renxi.mp3"></audio>
		<!-- 心思路设置 设置一个div 产生两个圆：伪类选择器
		html   元素分类：所有元素明确种类
		       块元素：可以设置高宽，独占一行，典型div
			   行元素：不可以设置高宽，在一行内显示典型span
			   *文本就是行元素
		       行内块元素：可以设置宽高，在一行内显示，典型img
		
		-->
	<div></div>
	</body>
</html>